<template>
  <div id="dswd-aboutus-team" ref="dswd-aboutus-team">
    <div v-if="device === 'desktop'" class="dswd-aboutus dswd-aboutus-team">
      <div class="aboutus-wrap">
        <div class="aboutus-title">团队介绍</div>
        <div class="aboutus-en-title">Team</div>
      </div>
      <div class="leader-content">
        <template v-for="item of leaderData">
          <div :key="'team' + item.id" class="leader-member">
            <div class="team-member-avatar">
              <img :src="item.src" :alt="item.post">
            </div>
            <h4 class="team-member-name">{{ item.name }}</h4>
            <div class="team-member-post">{{ item.post }}</div>
            <p class="team-member-intro" v-html="item.description" />
          </div>
        </template>
      </div>
      <div class="team-content">
        <template v-for="item of teamData">
          <div :key="'team' + item.id" class="team-member">
            <div class="team-member-avatar">
              <img :src="item.src" :alt="item.post">
            </div>
            <h4 class="team-member-name">{{ item.name }}</h4>
            <div class="team-member-post">{{ item.post }}</div>
            <p class="team-member-intro" v-html="item.description" />
          </div>
        </template>
      </div>
      <div class="dividing-line" />
    </div>
    <div v-if="device === 'ipad'" class="dswd-p-aboutus dswd-p-aboutus-team">
      <div class="aboutus-wrap">
        <div class="aboutus-title">团队介绍</div>
        <div class="aboutus-en-title">Team</div>
      </div>
      <div class="leader-content">
        <template v-for="item of leaderData">
          <div :key="'team' + item.id" class="leader-member">
            <div class="team-member-avatar">
              <img :src="item.src" :alt="item.post">
            </div>
            <h4 class="team-member-name">{{ item.name }}</h4>
            <div class="team-member-post">{{ item.post }}</div>
            <p class="team-member-intro" v-html="item.description" />
          </div>
        </template>
      </div>
      <div class="team-content">
        <template v-for="item of teamData">
          <div :key="'team' + item.id" class="team-member">
            <div class="team-member-avatar">
              <img :src="item.src" :alt="item.post">
            </div>
            <h4 class="team-member-name">{{ item.name }}</h4>
            <div class="team-member-post">{{ item.post }}</div>
            <p class="team-member-intro" v-html="item.description" />
          </div>
        </template>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device === 'mobile'" class="dswd-m-aboutus dswd-m-aboutus-team">
      <div class="aboutus-wrap">
        <div class="aboutus-title">团队介绍</div>
        <div class="aboutus-en-title">Team</div>
      </div>
      <div class="team-content">
        <template v-for="item of leaderData">
          <div :key="'team' + item.id" class="team-member">
            <div class="team-member-avatar">
              <img :src="item.src" :alt="item.post">
            </div>
            <h4 class="team-member-name">{{ item.name }}</h4>
            <div class="team-member-post">{{ item.post }}</div>
            <p class="team-member-intro" v-html="item.description" />
          </div>
        </template>
      </div>
      <div class="team-content">
        <template v-for="item of teamData">
          <div :key="'team' + item.id" class="team-member">
            <div class="team-member-avatar">
              <img :src="item.src" :alt="item.post">
            </div>
            <h4 class="team-member-name">{{ item.name }}</h4>
            <div class="team-member-post">{{ item.post }}</div>
            <p class="team-member-intro" v-html="item.description" />
          </div>
        </template>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {
      leaderData: [
        {
          id: '1',
          name: '任绍斌',
          post: '创始人兼CEO',
          src: require('../../assets/image/aboutus/team/CEO.png'),
          description:
            '二十年的设计行业实践经验<br>近十年的地产管理经验<br>中机六院副院长<br>河南国润地产集团副总裁'
        },
        {
          id: '2',
          name: '丁松阳',
          post: '联合创始人兼CTO',
          src: require('../../assets/image/aboutus/team/CTO.png'),
          description:
            '解放军信息工程大学计算机软件与理论博士，主持过重大专项，参加863项目十余项，主要从事大数据、人工智能技术的应用开发'
        }
      ],
      teamData: [
        {
          id: '1',
          name: '陈珂锐',
          post: '研发中心负责人',
          src: require('../../assets/image/aboutus/team/CKR.png'),
          description:
            '吉林大学计算机应用技术专业博士,主要研究方向人工智能算法'
        },
        {
          id: '2',
          name: '徐国愚',
          post: '智能算法负责人',
          src: require('../../assets/image/aboutus/team/XGY.png'),
          description: '解放军信息工程大学计算机软件与理论博士，人工智能专家'
        },
        {
          id: '4',
          name: '李智泉',
          post: '结构计算负责人',
          src: require('../../assets/image/aboutus/team/LZQ.png'),
          description:
            '大连理工大学建筑与土木工程硕士，国家一级注册工程师，河南省建筑结构专委会会员，致力于结构计算数值模拟'
        },
        {
          id: '7',
          name: '张伟伟',
          post: '市场总监',
          src: require('../../assets/image/aboutus/team/ZWW.png'),
          description: '郑州大学工学硕士<br>国家一级注册工程师'
        },
        {
          id: '8',
          name: '田功克',
          post: '人力资源总监',
          src: require('../../assets/image/aboutus/team/TGK.png'),
          description: '东南大学工学硕士<br>国家注册工程师<br>暖通设计专家'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
@import "~@/styles/aboutus/team.scss";
</style>
